<template>
  <el-image
    :src="src"
    :fit="fit"
    :alt="alt"
    :preview-src-list="previewSrcList"
    :z-index="zIndex"
    class="Cimage"
    :style="{ width: width, height: height }"
    :class="{ round: round }"
    v-bind="$attrs"
    @load="load"
    @error="error"
  >
    <div slot="placeholder" class="placeholder">
      <i class="el-icon-loading fs22" />
    </div>
    <el-image slot="error" :src="nullData" fit="cover" style="width: 100%;height: 100%;" />
  </el-image>
</template>
<script>
import nullData from '@/assets/images/nullData.jpg'
export default {
  name: 'Cimage',
  props: {
    src: {
      type: String,
      default: ''
    },
    fit: {
      type: String,
      default: ''
    },
    alt: {
      type: String,
      default: ''
    },
    previewSrcList: {
      type: Array,
      default: () => []
    },
    zIndex: {
      type: Number,
      default: 2000
    },
    width: {
      type: String,
      default: '50px'
    },
    height: {
      type: String,
      default: '50px'
    },
    round: { // 是否边角 弯曲圆润
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nullData: nullData
    }
  },
  methods: {
    load(e) {
      this.$emit('load', e)
    },
    error(e) {
      this.$emit('load', e)
    }
  }
}
</script>
<style lang="scss" scoped>
.Cimage{
  .placeholder{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.round{
  border-radius: 5px;
}
</style>
